<script setup lang="ts">
import { onMounted, ref } from "vue";

// 声明 props 类型
export interface deviceFormProps {
  formInline: {
    name: string;
    endSystem: string;
    dataPlatform: string;
    communicationProtocol: string;
    decimalPlaces: number;
  };
}
// 声明 props 默认值
// 推荐阅读：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
// 平台  规约  下拉的数据
const platform_select_option = ref([]);
// 通讯协议  下拉的数据
const communication_select_option = ref([]);

const props = withDefaults(defineProps<deviceFormProps>(), {
  formInline: () => ({
    name: "",
    endSystem: "",
    dataPlatform: "",
    communicationProtocol: "",
    decimalPlaces: 0
  })
});
// 所有的传输协议
const transport_protocol_select_option = [
  { label: "MQTT_client", value: "MQTT_client" }
  // { label: "TCP_client", value: "TCP_client" },
  // { label: "HTTP_client", value: "HTTP_client" },
  // { label: "TCP_server", value: "TCP_server" },
  // { label: "serial_port", value: "serial_port" }
];
/////////////////////////////////////////平台规约
// mqtt传输协议下面的平台规约
const platform_mqtt_select_option = [
  { label: "私有云", value: "Private_cloud" },
  { label: "阿里云", value: "Alibaba_cloud" },
  { label: "华为云", value: "Huawei_cloud" },
  { label: "ThingsBoard", value: "ThingsBoard" },
  { label: "腾讯云", value: "Tencent_cloud" },
  { label: "OneNet", value: "OneNet" },
  { label: "YkIoT", value: "YkIoT" }
];
////////////////////////////////////////////////通讯协议
// 私有云下面的 通讯协议
const communication_private_select_option = [
  { label: "默认", value: "0" },
  { label: "自定义", value: "Customization" }
];
// 阿里云下面 通讯协议
const communication_ali_select_option = [
  { label: "默认", value: "Customization" },
  { label: "Alink", value: "Alink" }
];
// 华为云下面 通讯协议
const communication_huawei_select_option = [{ label: "IoTDA", value: "IoTDA" }];
// ThingsBoard 下面 通讯协议
const communication_thingsBoard_select_option = [
  { label: "ThingsBoard", value: "ThingsBoard" }
];
// 腾讯云 下面 通讯协议
const communication_tencent_select_option = [
  { label: "IOTExplorer", value: "IOTExplorer" }
];
// OneNet 下面 通讯协议
const communication_onenet_select_option = [
  { label: "OneNet", value: "OneNet" }
];
// YkIoT 下面 通讯协议
const communication_ykiot_select_option = [{ label: "V5.0", value: "V5.0" }];
// 修改传输协议的时候
function changeEndSystem(value) {
  console.log("修改传输协议的时候", value);
  switch (value) {
    case "MQTT_client":
      platform_select_option.value = platform_mqtt_select_option;
      newFormInline.value.dataPlatform = platform_select_option.value[0].value;
      changePlatform(newFormInline.value.dataPlatform);
      break;
    case "TCP_client":
      platform_select_option.value = [];
      break;
    case "HTTP_client":
      platform_select_option.value = [];
      break;
    case "TCP_server":
  }
}
// 修改平台规约的时候
function changePlatform(value) {
  // console.log("修改平台规约的时候", value);
  let selectedOption;
  switch (value) {
    case "Private_cloud":
      selectedOption = communication_private_select_option;
      break;
    case "Alibaba_cloud":
      selectedOption = communication_ali_select_option;
      break;
    case "Huawei_cloud":
      selectedOption = communication_huawei_select_option;
      break;
    case "ThingsBoard":
      selectedOption = communication_thingsBoard_select_option;
      break;
    case "Tencent_cloud":
      selectedOption = communication_tencent_select_option;
      break;
    case "OneNet":
      selectedOption = communication_onenet_select_option;
      break;
    case "YkIoT":
      selectedOption = communication_ykiot_select_option;
      break;
    default:
      return;
  }
  communication_select_option.value = selectedOption;
  newFormInline.value.communicationProtocol = selectedOption[0].value;
}
const newFormInline = ref(props.formInline);
onMounted(() => {
  newFormInline.value.name = "";
  newFormInline.value.endSystem = "MQTT_client";
  changeEndSystem(newFormInline.value.endSystem);
});
</script>

<template>
  <el-form :model="newFormInline" class="add_form">
    <el-form-item label="服务器名称" prop="name">
      <el-input
        v-model="newFormInline.name"
        class="!w-[220px]"
        placeholder="请输入服务器名称"
      />
    </el-form-item>
    <el-form-item label="传输协议">
      <el-select
        v-model="newFormInline.endSystem"
        class="!w-[220px]"
        placeholder="请选择"
        @change="changeEndSystem(newFormInline.endSystem)"
      >
        <el-option
          v-for="(item, index) in transport_protocol_select_option"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="数据平台">
      <el-select
        v-model="newFormInline.dataPlatform"
        class="!w-[220px]"
        placeholder="请选择"
        @change="changePlatform(newFormInline.dataPlatform)"
      >
        <el-option
          v-for="(item, index) in platform_select_option"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="通讯协议">
      <el-select
        v-model="newFormInline.communicationProtocol"
        class="!w-[220px]"
        placeholder="请选择"
      >
        <el-option
          v-for="(item, index) in communication_select_option"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>
<style lang="scss" scoped>
.add_form :deep(.el-form-item__label) {
  width: 130px !important;
}
</style>
